<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view class="main" v-if="!loadding">
			<view v-if="classData.length > 0" class="left">
				<view class="lists">
					<view class="items" v-bind:class="{active:index == comCurrent}" v-for="(item, index) in classData"
						:key="index" @click="changePro(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view v-if="classData.length > 0" class="right">
				<view v-if="proData.length > 0" class="lists">
					<view class="items" v-for="(item, index) in proData" :key="index">
						<view class="items-img">
							<image :src="item.image"></image>
						</view>
						<view class="items-right">
							<view class="pro_title">
								{{item.name}}
							</view>
							<view class="pro_money">
								<text class="price">{{item.price}}</text>
								<text class="init">x1</text>
							</view>
							<view class="pro_num">
								<u-number-box v-if="item.min>0 && item.isshow==1" class="pro_num_box" disabledInput :step="item.min" min="0" v-model="item.nums"
									buttonSize="23" @change="proNumChange(item)"></u-number-box>
								<u-number-box v-if="item.min>0 && item.isshow != 1" class="pro_num_box" :step="item.min" min="0" v-model="item.nums"
									buttonSize="23" :disabled="true"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="data" icon="/static/Empty/data_null.png"></u-empty>
			</view>
			<view class="buyBtn" @click="setOrder">
				下  单 <text class="tishi">(每次只能下单一种产品)</text>
			</view>
		</view>
		<u-empty v-if="classData.length <= 0" mode="data" icon="/static/Empty/data_null.png"></u-empty>
	</view>
</template>

<script>
	import empty from '../../../../uni_modules/uview-ui/libs/config/props/empty';
	var util = require('@/util/request5.js');
	export default {
		data() {
			return {
				loadding: true,
				comCurrent: 0,
				nums: 0,
				classData: [],
				proData: [],
				userinfo: {},
				selectData: [],
			}
		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo');
			this.selectData = []
			uni.setStorageSync('selectData', this.selectData);
			this.loadData()
		},
		onShow() {
			this.selectData = []
			uni.setStorageSync('selectData', this.selectData);
		},
		methods: {
			// 产品分类点击
			changePro(e) {
				uni.showLoading({
					title: '加载中'
				});
				this.comCurrent = e
				this.proData = this.classData[e].proData
				uni.hideLoading()
			},
			// 加载商品数据
			async loadData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/getProductData',
					header: {
						'token': this.userinfo.token
					}
				});
				this.loadding = false
				this.classData = res.data
				if (res.data.length > 0) {
					this.proData = res.data[0].proData
				}
			},
			// 下单
			async setOrder(e) {
				if (this.selectData.length <= 0) {
					uni.showToast({
						title: '请选择终端',
						icon: "none"
					});
					return false
				}
				uni.setStorageSync('selectData', this.selectData);
				uni.navigateTo({
					url: '/pages/version5/index/shop/settle'
				})
			},
			// 商品数量变化时触发
			proNumChange(item) {
				var that = this
				this.$nextTick(() => {
					if (that.selectData.length > 0) {
						if (item.nums > 0) {
							that.selectData[0].nums = item.nums
						} else {
							that.selectData = []
							for(var i in that.proData) {
								that.proData[i].isshow = 1
							}
						}
					} else {
						for(var i in that.proData) {
							if (item.id != that.proData[i].id) {
								that.proData[i].isshow = 2
							}
						}
						that.selectData.push(item)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: absolute;

		.left {
			position: fixed;
			top: 88rpx;
			left: 0;
			bottom: 100rpx;
			width: 30%;
			overflow-y: auto;

			.lists {
				background-color: #f4f4f5;

				.items {
					font-size: 24rpx;
					text-align: center;
					padding: 16rpx 0;
					border-bottom: 1px solid #ffffff;
				}

				.active {
					background-color: #2f9fff;
					color: #ffffff;
				}
			}
		}

		.right {
			position: fixed;
			top: 88rpx;
			right: 0;
			bottom: 110rpx;
			overflow-y: auto;
			width: 69%;

			.lists {
				padding: 10rpx;

				.items {
					padding: 10rpx 0;
					width: 100%;
					height: 220rpx;

					.items-img {
						float: left;
						text-align: center;
						width: 42%;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}

					.items-right {
						width: 54%;
						float: left;
						margin-left: 3%;
						padding: 20rpx 0;

						.pro_title {
							font-size: 27rpx;
							font-weight: bold;
							padding: 10rpx 0;
						}

						.pro_money {
							font-size: 28rpx;
							display: flex;
							justify-content: space-between;
							padding: 10rpx 0;

							.price {
								color: #fa3534;
								font-weight: bold;
							}
						}

						.pro_num {
							padding-bottom: 10rpx;
							display: flex;
							justify-content: flex-end;
							padding: 10rpx 0;
						}

						.pro_btn {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;

							.buy {
								padding: 10rpx;
								font-size: 24rpx;
								color: #ffffff;
								background-color: #fa3534;
								border-radius: 10rpx;
							}
						}
					}
				}
			}
		}
		
		.buyBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background-color: #2f9fff;
			text-align: center;
			color: #ffffff;
			line-height: 100rpx;
			font-weight: bold;
			.tishi {
				font-size: 24rpx;
				color: #f4f4f5;
				padding-left: 20rpx;
			}
		}
	}
</style>